<template>
  <div ref="all">
    <el-container>
      <el-aside width="auto">
        <i></i>
        <span>WeBlog</span>
        <!--  -->

        <!--  -->
        <el-menu
          :default-active="active"
          class="el-menu-vertical-demo"
          @open="handleOpen"
          @close="handleClose"
          :collapse="!isCollapse"
          background-color="#000"
          text-color="#fff"
          router
        >
          <el-menu-item index="/htindex/indexlist">
            <i class="el-icon-s-platform"></i>
            <span slot="title">仪表盘</span>
          </el-menu-item>
          <el-menu-item index="/htindex/textht">
            <i class="el-icon-s-order"></i>
            <span slot="title">文章管理</span>
          </el-menu-item>
          <el-menu-item index="/htindex/classifyht">
            <i class="el-icon-folder-opened"></i>
            <span slot="title">分类管理</span>
          </el-menu-item>
          <el-menu-item index="/htindex/taght">
            <i class="el-icon-price-tag"></i>
            <span slot="title">标签管理</span>
          </el-menu-item>
          <el-menu-item index="/htindex/blog">
            <i class="el-icon-setting"></i>
            <span slot="title">博客管理</span>
          </el-menu-item>
        </el-menu>
      </el-aside>
      <el-container>
        <el-header class="header" style="height: 100px">
          <div class="header-box1">
            <div class="show" @click="isCollapse = !isCollapse">
              <i class="el-icon-s-fold" v-if="isCollapse"></i>
              <i class="el-icon-s-unfold" v-if="!isCollapse"></i>
              <!-- 侧边栏展开 -->
            </div>
            <div class="home">
              <!-- 右边主页部分 -->
              <i class="el-icon-s-home" @click="$router.push('/home')"></i>
              <i class="el-icon-refresh"></i>
              <i class="el-icon-full-screen" @click="allping"></i>
              <div class="index2" @click="closelogin" v-if="$store.state.zzz == 0">
                请先登录
              </div>
              <div class="index" v-if="$store.state.zzz ===1">
                <img :src="userimg" alt="" />
                <span>{{ username }}</span>
                <i class="el-icon-arrow-down"> </i>
                <div>
                  <p>修改密码</p>
                  <p @click="closelogin">退出登录</p>
                </div>
              </div>
            </div>
          </div>
          <div class="header-box2">
            <div>
              <!-- 标签页  先写完后面内容在调试标签页把-->
              <el-tabs
                v-model="editableTabsValue"
                type="card"
                @edit="handleTabsEdit"
                closable
              >
                <el-tab-pane
                  :key="item.name"
                  v-for="item in editableTabs"
                  :label="item.title"
                  :name="item.name"
                >
                  <router-view
                    name="123
                  "
                  ></router-view>
                </el-tab-pane>
              </el-tabs>
            </div>
            <div>
              <i class="el-icon-arrow-down">展开</i>
            </div>
          </div>
          <!--  -->
        </el-header>
        <el-main>
          <router-view></router-view>
        </el-main>
        <el-footer>Footer</el-footer>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import screenfull from "screenfull";
export default {
  data() {
    return {
      isCollapse: true, //是否展开导航栏
      editableTabsValue: "2",
      //
      editableTabs: [
        {
          title: "Tab 1",
          name: "taght",
          content: "Tab 1 content",
        },
        {
          title: "Tab 2",
          name: "2",
          content: "Tab 2 content",
        },
      ],
      timeout: 1,
      username: "",
      userimg: "",
      tabIndex: 2,
      state: false,
      // 到从标签页
    };
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    handleTabsEdit(targetName, action) {
      if (action === "add") {
        let newTabName = ++this.tabIndex + "";
        this.editableTabs.push({
          title: "New Tab",
          name: newTabName,
          content: "New Tab content",
        });
        this.editableTabsValue = newTabName;
      }
      if (action === "remove") {
        let tabs = this.editableTabs;
        let activeName = this.editableTabsValue;
        if (activeName === targetName) {
          tabs.forEach((tab, index) => {
            if (tab.name === targetName) {
              let nextTab = tabs[index + 1] || tabs[index - 1];
              if (nextTab) {
                activeName = nextTab.name;
              }
            }
          });
        }

        this.editableTabsValue = activeName;
        this.editableTabs = tabs.filter((tab) => tab.name !== targetName);
      }
    },
    async getdetail() {
      let res = await this.$axios.post("/api/admin/detail");
      // console.log(res, "主页信息");
      this.username = res.data.data.username;
      this.userimg = res.data.data.avatar;
      if (this.timeout == 1) {
        this.$nextTick(() => {
          // location.reload()
          this.timeout = 0;
        });
      }
    },
    allping(){
      console.log(111);
      screenfull.request(); // 全屏
    },
    closelogin() {
      this.$router.replace({
        name: "login",
      });
      this.$store.state.zzz  = 0

      this.$store.state.langing = false;
      if (localStorage.getItem("token")) {
        localStorage.removeItem("token");
      }
    },
  },
  created() {
    this.getdetail();
  },
  computed: {
    active() {
      return this.$route.fullPath;
    },
    statetf() {
      return this.$store.state.langing;
    },
  },
};
</script>

<style scoped lang="scss">
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 260px;
  height: 90vh;
  min-height: 90vh;
}
.el-container .el-aside[data-v-603709fe] {
  line-height: 60px;
}

.el-menu-item[data-v-603709fe] {
  font-size: 18px;
}
.collapse-transition {
  height: 90vh;
}
.el-menu-item,
.el-submenu__title {
  height: 80px;
  line-height: 80px;
}
.el-menu--collapse {
  width: 90px;
}

.el-header,
.el-footer {
  background-color: #ffffff;
  /* color: #fff; */
  text-align: center;
  line-height: 60px;
}

.el-aside {
  background-color: #2b3b4d;
  color: #c2c2c2;
  text-align: center;
  line-height: 200px;
}

.el-main {
  background-color: #ececec;
  color: #333;
  text-align: center;
  line-height: 160px;
}

body > .el-container {
  margin-bottom: 40px;
}
.el-container .el-aside {
  line-height: 320px;
}
::v-deep .header {
  height: 80px;
}
.header-box1 {
  height: 60px;
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #776;
  .home {
    width: 200px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    img {
      width: 30px;
      height: 30px;
      margin: 0 5px;
    }
    .index {
      display: flex;
      align-items: center;
      position: relative;
      > div {
        width: 100px;
        height: 90px;
        line-height: 20px;
        background-color: #ffffff;
        text-align: center;
        position: absolute;
        bottom: -90px;
        display: none;
        z-index: 10;
        p {
          cursor: pointer;
          &:hover {
            color: #2dd5ff;
          }
        }
      }
      &:hover > div {
        display: block;
      }
    }
  }
}
.header-box2 {
  width: 100%;
  height: 20px;
  display: flex;
  justify-content: space-between;
  background-color: #fff;
  line-height: 40px;
}
</style>